import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:tracker/common/widget/common.dart';
import 'package:tracker/pages/home/ChangeIcon/ChangeIconData.dart';
import 'package:tracker/theme/app_theme.dart';

class ChangeIconPage extends ConsumerStatefulWidget {
  const ChangeIconPage({super.key});

  @override
  ConsumerState<ChangeIconPage> createState() => _ChangeIconPageState();
}

class _ChangeIconPageState extends ConsumerState<ChangeIconPage> {
  ChangeIconData baseInfoData = ChangeIconData();
  final dataArr = ["汽车", "货车", "电动车", "人", "宠物", "牛", "羊"];
  final dataIconArr = [
    "icon_car",
    "icon_ka_car",
    "icon_elc_car",
    "icon_ren",
    "icon_chongwu",
    "icon_niu",
    "icon_yang"
  ];

  int chooseIndex = 0;

  _buildList() {
    double descFontSize = 16;
    return Padding(
        padding: EdgeInsets.only(left: 20, right: 20, top: 30),
        child: Column(
          children: [
            Container(
              // padding: EdgeInsets.only(left: 8, right: 8, top: 20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(6),
              ),
              child: ListView.separated(
                itemCount: dataArr.length,
                shrinkWrap: true,
                itemBuilder: (context, index) {
                  return _buildTableCell(index, () {
                    setState(() {
                      chooseIndex = index;
                      print("chooseIndex");

                      print(chooseIndex);
                    });
                  });
                },
                separatorBuilder: (context, index) {
                  return Container();
                },
              ),
            ),
          ],
        ));
  }

  _buildTableCell(int row, VoidCallback? onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
          constraints: BoxConstraints(minHeight: 50),
          padding: EdgeInsets.only(left: 20, right: 15, top: 0, bottom: 0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(2.0),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                height: 49,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Image.asset("assets/images/home/${dataIconArr[row]}.png",
                        width: 20, fit: BoxFit.fitWidth,),
                    const SizedBox(width: 16),
                    lpText(dataArr[row], bold: true),
                    const Expanded(child: Center()),
                    if (chooseIndex == row)
                      const Image(
                        width: 20,
                        height: 20,
                        image: AssetImage('assets/images/home/chooseIcon.png'),
                      )
                  ],
                ),
              ),
              if (row < 6) Divider(color: Color(0xFFEFEFEF), thickness: 1)
            ],
          )),
    );
  }

  @override
  void initState() {
    //监听Widget是否绘制完毕
    WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  _afterLayout(_) async  {
    final prefs = await SharedPreferences.getInstance();
    final icon = prefs.getString('mapChooseIcon') ?? "";
    chooseIndex = dataIconArr.indexOf(icon);
    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('切换图标'),
        centerTitle: true,
        backgroundColor: AppTheme.themeConfig.navBarColor,
        foregroundColor: AppTheme.themeConfig.dividerColor,
        leading: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Container(
            height: kToolbarHeight,
            padding: const EdgeInsets.only(top: 8),
            alignment: Alignment.center,
            child: const Text(' <返回',
                textAlign: TextAlign.center,
                maxLines: 1,
                style: TextStyle(color: Colors.black)),
          ),

        ),
        actions: [
          IconButton(
            onPressed: save,
            icon: const Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text('保存'),
              ],
            ),
          ),
        ],
      ),
      backgroundColor: AppTheme.themeConfig.dividerColor,
      body: _buildList(),
    );
  }

  void save() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('mapChooseIcon', dataIconArr[chooseIndex]);
    Navigator.pop(context, true);
  }
}
